<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="ancient-app">
    <RouterView />
  </div>
</template>

<style scoped>
.ancient-app {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 添加动漫风格的飘浮装饰 */
.ancient-app::before {
  content: '';
  position: fixed;
  top: -100px;
  left: -100px;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  background-image: 
    url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a8f5c0' fill-opacity='0.04'%3E%3Cpath d='M200 100l15 45h45l-37 30 15 45-38-30-38 30 15-45-37-30h45z'/%3E%3Ccircle cx='100' cy='300' r='12'/%3E%3Ccircle cx='300' cy='150' r='8'/%3E%3Cpath d='M80 80c0-20 16-36 36-36s36 16 36 36-16 36-36 36-36-16-36-36z'/%3E%3Cpath d='M250 320c0-25 20-45 45-45s45 20 45 45-20 45-45 45-45-20-45-45z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -10;
  animation: gentle-float 30s ease-in-out infinite;
}

@keyframes gentle-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -20px) rotate(1deg); }
  50% { transform: translate(-5px, -10px) rotate(0deg); }
  75% { transform: translate(15px, -25px) rotate(-1deg); }
}

/* 为整个应用添加古风滚动条 */
:deep(*::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(*::-webkit-scrollbar-track) {
  background: var(--color-background-mute);
  border-radius: 4px;
}

:deep(*::-webkit-scrollbar-thumb) {
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

:deep(*::-webkit-scrollbar-thumb:hover) {
  background: linear-gradient(180deg, var(--color-secondary), var(--color-accent));
}

/* Element Plus 组件的动漫风格主题覆盖 */
:deep(.el-button) {
  border-radius: var(--border-radius);
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  /* 确保按钮基本样式正常显示 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: var(--el-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  font-weight: var(--el-button-font-weight);
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  border: var(--el-border-width) var(--el-border-style) var(--el-button-border-color);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-soft);
  color: #ffffff;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-secondary);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  border: 1px solid #67c23a;
  color: #ffffff;
}

:deep(.el-button--success:hover) {
  background: linear-gradient(135deg, #85ce61, #95d475);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, var(--color-danger), #f56c6c);
  border: 1px solid var(--color-danger);
  color: #ffffff;
}

:deep(.el-button--danger:hover) {
  background: linear-gradient(135deg, #f56c6c, #f78989);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

:deep(.el-input__wrapper) {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

:deep(.el-input__wrapper:hover) {
  border-color: var(--color-primary);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(139, 154, 107, 0.2);
}

:deep(.el-card) {
  border-radius: calc(var(--border-radius) * 2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

:deep(.el-table) {
  border-radius: var(--border-radius);
  overflow: hidden;
  /* 确保表格正常显示 */
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
}

:deep(.el-table th) {
  background: var(--color-background-soft);
  color: var(--color-heading);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

:deep(.el-table td) {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

:deep(.el-table tr) {
  background-color: var(--color-background);
}

:deep(.el-table tr:hover) {
  background-color: var(--color-background-soft);
}

:deep(.el-table__body) {
  background-color: var(--color-background);
}

/* 确保表格内容可见 */
:deep(.el-table .cell) {
  color: var(--color-text);
  font-size: 14px;
  line-height: 23px;
}

:deep(.el-pagination) {
  gap: 8px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  margin: 0 2px;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  border-color: var(--color-primary);
}

/* 修复对话框样式 */
:deep(.el-dialog) {
  border-radius: calc(var(--border-radius) * 2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-anime);
}

:deep(.el-dialog__header) {
  background: var(--color-background-soft);
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0 0;
}

:deep(.el-dialog__body) {
  background: var(--color-background);
  color: var(--color-text);
}

/* 修复标签样式 */
:deep(.el-tag) {
  border-radius: calc(var(--border-radius) * 0.5);
  border: 1px solid var(--color-border);
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  border-color: var(--color-primary);
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, var(--color-danger), #f56c6c);
  color: white;
  border-color: var(--color-danger);
}

/* 确保所有文本内容都有正确的颜色 */
:deep(.common-layout) {
  color: var(--color-text);
}

:deep(.common-layout *) {
  color: inherit;
}
</style>
